<?php
/**
 * @name /www/gallery.php
 * @author Michael Foss <michael@mikefoss.com>
 * @version 2011.04.25
 * 
 * This is the gallery page for photos.
 */

// Sets up configuration settings and includes libraries.
require_once('_ini.php');

function DefineHeader() {
  $js = array(
    'jquery.galleriffic.js',
    'jquery.history.js',
    'jquery.opacityrollover.js'
  );
  foreach ($js as $script)
    println('<script type="text/javascript" src="' . _webroot('/js/' . $script) . '"></script>');
?><script type="text/javascript">
  $(function() {
//    var gallery = $('#thumbs').galleriffic();
    $('#thumbs .thumb').click(function() {
      $this = $(this);
      var $fs1 = $('#fullsize1');
      var $fs2 = $('#fullsize2');
      if ($fs1.css('display') == 'none') {
        $fs1 = $('#fullsize2');
        $fs2 = $('#fullsize1');
      }
      $fs2
        .attr('src', '<?=_webroot('/images/gallery/fullsize/') ?>' + $this.attr('rel') + '.jpg')
        .attr('title', $this.attr('title'));
      $fs1.fadeOut(function() {
        $fs2.fadeIn();
      });
      return false;
    });
  });
</script>
<link type="text/css" rel="stylesheet" href="<?=_webroot('/css/galleriffic-1.css') ?>" />
<style type="text/css">
  .caption {
    display: none;
  }
  #fullsize {
    width: 650px;
    overflow-x: hidden;
  }
  #fullsize2 {
    display: none;
  }
  #thumbs {
    float: left;
    width: 240px;
    height: 600px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-right: 10px;
  }
  #thumbs .thumb {
    width: 240px;
  }
  #thumbs li {
    margin-bottom: 5px;
  }
</style>
<?
}

/**
 * Defines page content.
 *
 */
function DefineContent() {
  $images = array(
    'DSC04759' => 'Lorem Ipsum',
    'DSC04770' => 'Lorem Ipsum',
    'DSC04793' => 'Lorem Ipsum',
    'DSC04828' => 'Lorem Ipsum',
    'DSC04830' => 'Lorem Ipsum',
    'DSC04932' => 'Lorem Ipsum',
    'DSC04942' => 'Lorem Ipsum',
    'DSC04944' => 'Lorem Ipsum',
    'DSC04949' => 'Lorem Ipsum',
    'DSC04951' => 'Lorem Ipsum',
    'DSC04958' => 'Lorem Ipsum',
    'DSC04962' => 'Lorem Ipsum',
    'DSC04964' => 'Lorem Ipsum',
    'DSC04966' => 'Lorem Ipsum',
    'DSC04971' => 'Lorem Ipsum',
    'DSC04973' => 'Lorem Ipsum',
    'DSC04989' => 'Lorem Ipsum',
    'DSC05085' => 'Lorem Ipsum',
    'DSC05111' => 'Lorem Ipsum',
    'DSC05112' => 'Lorem Ipsum',
    'DSC05462' => 'Lorem Ipsum',
    'DSC05466' => 'Lorem Ipsum',
    'DSC05501' => 'Lorem Ipsum',
    'DSC05504' => 'Lorem Ipsum',
    'DSC05506' => 'Lorem Ipsum',
    'DSC05525' => 'Lorem Ipsum',
    'P24' => 'Lorem Ipsum'
  );
  // Page content goes here.
  ?>
  <script type="text/javascript">
    var imgs = [
<?
    foreach ($images as $file => $title)
      println(
        "'" . _webroot('/images/gallery/thumbnails/' . $file . '.jpg') . "', " .
        "'" . _webroot('/images/gallery/fullsize/' . $file . '.jpg') . "', "
      );
?>
      ''
    ];
    $(imgs).each(function(){
      $('<img/>')[0].src = this;
    });
  </script>
<h1>Gallery</h1>
<div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">
  <ul class="thumbs noscript">
<?
  foreach ($images as $file => $title) {
?>
    <li>
      <a class="thumb" name="optionalCustomIdentifier" rel="<?=$file ?>" href="<?=_webroot('/images/gallery/fullsize/' . $file . '.jpg') ?>" title="<?=htmlspecialchars($title) ?>">
        <img src="<?=_webroot('/images/gallery/thumbnails/' . $file . '.jpg') ?>" alt="<?=htmlspecialchars($title) ?>" />
      </a>
      <div class="caption">
        <?=htmlspecialchars($title) ?>
      </div>
    </li>
<?
  }
?>
  </ul>
</div>
<div id="fullsize">
  <img id="fullsize1" src="<?=_webroot('/images/gallery/fullsize/DSC04759.jpg') ?>" title="Lorem Ipsum" />
  <img id="fullsize2" src="<?=_webroot('/images/gallery/fullsize/DSC04759.jpg') ?>" title="Lorem Ipsum" />
</div>
<div style="clear: both;"></div>
<?
}

// Launches the page; without this, nothing happens.
require_once('_loader.php');